<template>
  <div class="q-merge">
    <div class="q-merge-header">
      <h3>代码合并</h3>
      <ul>
        <li
          v-for="(item, index) in approvalStatus"
          :key="index"
          :class="{active: item.value === currentApprovalStatus}"
          @click="selectApprovalStatus(item.value)">{{ item.label }}</li>
      </ul>
      <el-select v-model="currentIteration" placeholder="请选择" size="small">
        <el-option label="所有迭代" key="" value=""></el-option>
        <el-option
          v-for="item in iterationList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
    <q-table
      :data="data"
      :columns="columns"
      :option="option"
      @handleOperate></q-table>
  </div>
</template>

<script>
import {getData, postData} from '@/api/requestData'
import {handleTimeDuration} from '@/utils/index'
export default {
  components: {
    QTable: () => import('@/components/QTable')
  },
  filters: {
    filterDurationTime(time) {
      return handleTimeDuration(time)
    },
    filterColor(val) {
      const color = {
        'bug': '#d9534f',
        'confirmed': '#d9534f',
        'critical': '#d9534f',
        'discussion': '#428bca',
        'documentation': '#f0ad4e',
        'enhancement': '#5cb85c',
        'suggestion': '#428bca',
        'support': '#f0ad4e'
      }
      return color[val]
    },
    styleFilter(v) {
      const sty = 'display:inline-block;margin-right:3px;width: 10px;height: 10px;background-color:' + v.color
      return sty
    }
  },
  data() {
    return {
      currentIteration: '',
      iterationList: [{
        label: '迭代一',
        value: 'diedai1'
      }, {
        label: '迭代二',
        value: 'diedai2'
      }, {
        label: '迭代三',
        value: 'diedai3'
      }],
      currentApprovalStatus: 'all',
      approvalStatus: [{
        label: '所有',
        value: 'all'
      }, {
        label: '未审批',
        value: 'disapproved'
      }, {
        label: '已审批',
        value: 'approved'
      }],
      columns: [{
        prop: 'sn',
        label: '编号'
      }, {
        prop: 'title',
        label: '测试计划标题'
      }, {
        prop: 'promoter',
        label: '发起人'
      }, {
        prop: 'iteration',
        label: '迭代',
        type: 'select',
        disabled: true,
        options: [{
          label: '迭代一',
          value: 'diedai1'
        }, {
          label: '迭代二',
          value: 'diedai2'
        }, {
          label: '迭代三',
          value: 'diedai3'
        }]
      }, {
        prop: 'defects',
        label: '产生缺陷'
      }, {
        prop: 'originBranch',
        label: '源分支'
      }, {
        prop: 'relatedMergeRequest',
        label: '关联合并请求'
      }, {
        prop: 'targetBranch',
        label: '目标分支'
      }, {
        prop: 'RemainingDefects',
        label: '遗留缺陷'
      }, {
        prop: 'developerVerify',
        label: '研发审核',
        type: 'dropdown',
        disabled: true,
        commonStyle: {
          padding: '5px',
          fontSize: '12px'
        },
        options: [{
          label: '未审核',
          value: '0',
          
          style: {
            color: '#003A8C',
            backgroundColor: '#D4EEFC'
          }
        }, {
          label: '审核通过',
          value: '1',
          style: {
            color: '#135200',
            backgroundColor: '#E4F7D2'
          }
        }, {
          label: '审核不通过',
          value: '2',
          style: {
            color: '#820014',
            backgroundColor: '#FFE8E6'
          }
        }]
      }, {
        prop: 'isDeleteOrigin',
        label: '删除源分支',
        type: 'dropdown',
        disabled: true,
        options: [{
          label: '否',
          value: 0
        }, {
          label: '是',
          value: 1
        }]
      }, {
        prop: 'reportTime',
        label: '测试报告提交'
      }, {
        prop: 'operation',
        label: '操作',
        type: 'operation',
        width: '160px',
        commonStyle: {
          cursor: 'pointer',
          color: '#4680FF'
        },
        options: [{
          label: '查看',
          icon: '',
          value: 'check'
        }, {
          label: '通过',
          icon: '',
          value: 'approve'
        }, {
          label: '拒绝',
          icon: '',
          value: 'reject'
        }, {
          label: '删除',
          icon: '',
          value: 'delete'
        }]
      }],
      option: {

      },
      data: [{
        sn: '900001',
        title: '获取高度',
        promoter: 'liujixiang',
        iteration: 'diedai1',
        defects: '10',
        originBranch: 'pre',
        relatedMergeRequest: '获取信号塔高度',
        targetBranch: 'master',
        RemainingDefects: '10',
        developerVerify: '0',
        isDeleteOrigin: 1,
        reportTime: 1597136251223
      }, {
        sn: '900002',
        title: '获取高度',
        promoter: 'liujixiang',
        iteration: 'diedai2',
        defects: '10',
        originBranch: 'pre',
        relatedMergeRequest: '获取信号塔高度',
        targetBranch: 'master',
        RemainingDefects: '10',
        developerVerify: '1',
        isDeleteOrigin: 1,
        reportTime: 1597136251223
      }, {
        sn: '900003',
        title: '获取高度',
        promoter: 'liujixiang',
        iteration: 'diedai1',
        defects: '10',
        originBranch: 'pre',
        relatedMergeRequest: '获取信号塔高度',
        targetBranch: 'master',
        RemainingDefects: '10',
        developerVerify: '2',
        isDeleteOrigin: 1,
        reportTime: 1597136251223
      }],
      pid: this.$route.params.pid,
      pname: this.$route.params.projectName,
      editForm: {
        state_event: '',
        assigneeId: [],
        labels: [],
        mergeIds: []
      },
      drawer: false,
      direction: 'rtl',
      listLoading: true,
      listData: [],
      options: [
        {label: '未关闭', value: 'opened'},
        {label: '已关闭', value: 'closed'},
        {label: '已合并', value: 'merged'},
        {label: '所有', value: 'all'}
      ],
      filter: {
        search: '',
        state: 'all',
      },
      mergeBranch: [],
      addDialogFormVisible: false,
      addForm: {
        sourceBranch: '',
        targetBranch: '',
        targetPid: ''
      },
      multipleSelection: [],
      stateEventOptions: [
        {label: '打开', value: 'reopen'},
        {label: '关闭', value: 'close'}
      ],
      projectMembers: [],
      assigneeLoading: true,
      labelList: [],
      labelLoading: true
    }
  },
  created() {
    this.addForm.targetPid = this.pid
    // this.fetchData()
  },
  methods: {
    selectApprovalStatus(status) {
      this.currentApprovalStatus = status
      // todo
    },
    fetchData() {
      const params = this.filter
      getData('/git/public/merge/request/list/' + this.pid, params).then((response) => {
        this.listData = response.data
        this.listLoading = false
      }).catch(() => {
      })
    },
    editMergedRequest() {
      if (this.multipleSelection.length === 0) {
        this.$message.info('请选择要编辑的合并')
        return
      }
      this.editForm.labels = this.editForm.labels.join(',')
      this.editForm.assigneeId = this.editForm.assigneeId.join(',')
      for (var i = 0; i < this.multipleSelection.length; i++) {
        this.editForm.mergeIds.push(this.multipleSelection[i].iid)
      }
      this.editForm.mergeIds = this.editForm.mergeIds.join(',')
      postData('/git/edit/merge/request/' + this.pid, this.editForm).then((response) => {
        this.$message.success(response.message)
      }).catch(() => {
      })
    },
    getAssignAndLabels() {
      getData('/git/project/member/' + this.pid).then((response) => {
        this.projectMembers = response.data.memberList
        this.assigneeLoading = false
        getData('/git/public/project/labels/' + this.pid).then((res) => {
          this.labelList = res.data
          this.labelLoading = false
        }).catch(() => {
        })
      }).catch(() => {
      })
    },
    filterAssign(row) {
      return row.username + '/' + row.name
    },
    gotoCommitList(branch) {
      this.$router.push({'path': '/git/commit/list/' + this.pname + '/' + this.pid + '?branch=' + branch})
    },
    getProjectInfo() {
      const url = '/git/public/all/branches/' + this.pid
      getData(url).then((response) => {
          this.mergeBranch = response.data
      }).catch(() => {

      })
    },
    createMergeView() {
      if (this.addForm.sourceBranch === '' || this.addForm.targetBranch === '') {
        this.$message.error('来源分支和目标分支必选')
        return
      }
      if (this.addForm.sourceBranch === this.addForm.targetBranch) {
        this.$message.error('必须选择不同的分支')
        return
      }
      this.addDialogFormVisible = false
      const params = '?sourceBranch=' + this.addForm.sourceBranch + '&targetBranch=' + this.addForm.targetBranch + '&targetPid=' + this.addForm.targetPid
      this.$router.push({path: '/git/merged/create/' + this.pname + '/' + this.pid + params})
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    deleteMergeRequest() {
      if (this.multipleSelection.length === 0) {
        this.$message.info('请选择要删除的合并')
        return
      }
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        confirmButtonType: 'warning',
        cancelButtonType: 'text',
        type: 'warning'
      }).then(() => {
        // 确认处理逻辑
        var iidStr = []
        for (var i = 0; i < this.multipleSelection.length; i++) {
          iidStr.push(this.multipleSelection[i].iid)
        }
        getData('/git/delete/merge/request/' + this.pid, {iid: iidStr.join(',')}).then((response) => {
          this.$message.success(response.message)
        }).catch(() => {
        })
      }).catch(() => {
        // 取消处理逻辑
      })
    },
    getMergeCommits(row) {
      this.$router.push({'path': '/git/merged/commit/' + this.pname + '/' + this.pid + '/' + row.iid})
    },
    // ***************************
    handleOperate(command, rowData) {
      console.log('handleOperate', command, rowData)
    }
  }
}
</script>

<style lang="scss" scoped>
.target:hover {
  cursor: pointer
}
.q-merge {
  padding: 0 20px 20px;
  background-color: #FFF;
  &-header {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    ul {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 14px;
      color: #666;
      li {
        list-style: none;
        padding: 8px 5px;
        margin-left: 16px;
        cursor: pointer;
        &.active {
          color: #4680FF;
          border-bottom: 1px solid #4680FF;
        }
      }
    }
    .el-select {
      margin-left: auto;
    }
  }
}
</style>
